<template>
  <div>
    <div class="editPublish-article-title">
      <input type="text" placeholder="请输入【ERROR标题】" v-model="article.title"></input>
    </div>
    <div class="editPublish-article-tags" id="">
      <div class="article-tags">
        <div class="article-tags-text"></div>
        <a href="javscript:;" class="deleteTag" @click="deleteTag">×</a>
      </div>
      <div class="article-tags">
        <div class="article-tags-text"></div>
        <a href="javscript:;" class="deleteTag" @click="deleteTag">×</a>
      </div>
      <div class="article-tags">
        <div class="article-tags-text"></div>
        <a href="javscript:;" class="deleteTag" @click="deleteTag">×</a>
      </div>
      <div class="article-tags">
        <div class="article-tags-text"></div>
        <a href="javscript:;" class="deleteTag" @click="deleteTag">×</a>
      </div>
      <input @keyup.enter="enter"
             ref="tag"
             type="text"
             class="article-tags-input"
             placeholder="请输入标签后按【Enter】"
             v-model="tagValue"
      ></input>
    </div>
    <div class="editPublish-article-dec">
      <v-md-editor
        v-model="article.text"
        left-toolbar = "undo redo | clear h bold italic strikethrough	quote ul ol table	hr link code image tip"
        :disabled-menus="[]"
        @upload-image="handleUploadImage"
        placeholder = "请使用【Markdown】语法编写标题的描述..."
        height="345px"
      >
      </v-md-editor>
      <div>
        <a href="javascript:;">
          <div class="publish-tip" id="publishTip"  @click="publishError">发布</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
    const text = `::: tip
                    你可以点击 toolbar 中的 tip 来快速插入
                  :::

                  ::: warning
                    这是一段警告
                  :::

                  ::: danger
                    这是一个危险警告
                  :::

                  ::: details
                    这是一个详情块，在 IE / Edge 中不生效
                  :::

                  ::: tip 自定义标题
                    你也可以自定义块中的标题
                  :::

                  ::: danger STOP
                    危险区域，禁止通行
                  :::
                 `;
    let articleTags = document.getElementsByClassName("article-tags")
    let articleTagsText = document.getElementsByClassName("article-tags-text")
    let deleteTag = document.getElementsByClassName("deleteTag")
    let tagCounts = 4
    export default {
        name: "PublishPage-error",
        data() {
            return {
                article:{
                    articleId:'',
                    title:'',
                    labels:'',
                    text: '',
                },
                label:[],
                tagValue:'',  // 双向绑定输入[标签]的input
                baseURL:'http://localhost:8081/publishPage/error/',
                baseURL2:'http://localhost:8081/publishPage/putMdFileOfPicture',  // 上传图片
                baseURL3:'http://localhost:8081/publishPage/editWorkById/',  // 获取 work 的信息
                imageURL:'',
                component:'error'
            };
        },
        mounted(){
          this.getWorkInfo()
        },
        methods:{
            getWorkInfo(){
                this.$emit("component","error")
                let workId = this.$route.query.workId
                if (typeof workId != "undefined"){
                    // 用于更新时候使用
                    this.article.articleId = workId
                    this.axios.post(this.baseURL3+workId).then(res=>{
                        if (res.data != false){
                            this.article.title = res.data.errorTitle;
                            this.article.text = res.data.errorAddr;
                            this.label = res.data.errorLabel.split('、');
                            for (let i=0; i<this.label.length; i++){
                                articleTagsText[i].innerHTML = this.label[i]
                                articleTags[i].style.transition = "0.3s"
                                articleTags[i].style.marginLeft = "10px"
                                articleTags[i].style.padding = "0px 5px"
                                deleteTag[i].style.width = "10px"
                                deleteTag[i].style.marginLeft = "2px"
                                tagCounts--
                            }
                        } else {
                            this.$message.error("服务器异常，内容加载失败")
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }

            },
            handleUploadImage(event, insertImage, files) {
                //拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
                let forms = new FormData()
                let configs = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                forms.append('file', files[0])
                this.axios.post(this.baseURL2, forms, configs).then(res=>{
                    if (res.data==false){
                        this.$message.error('图片添加失败');
                    }else {
                        // 向编辑框中插入对应的内容
                        insertImage({
                            url: res.data,
                            desc: '添加描述',
                        });
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )

            },
            enter(){
                if(this.tagValue.length > 15 || this.tagValue.length < 1){
                    // alert("内容长度需要大于0小于17")
                    this.$message.warning("标签字数需【大于0】且【小于15】")
                }else if(tagCounts<1){
                    // alert("最多只能添加4个标签")
                    this.$message.warning("最多只能添加【4】个标签")
                }else{
                    for (let i=0; i<articleTags.length; i++){
                        if(deleteTag[i].style.width == "0px" || deleteTag[i].style.width == 0){
                            this.label[i] = this.tagValue
                            articleTagsText[i].innerHTML = this.tagValue
                            articleTags[i].style.transition = "0.3s"
                            articleTags[i].style.marginLeft = "10px"
                            articleTags[i].style.padding = "0px 5px"
                            deleteTag[i].style.width = "10px"
                            deleteTag[i].style.marginLeft = "2px"
                            this.tagValue = ''
                            tagCounts--
                            break
                        }
                    }
                }
            },
            deleteTag(){
                for (let i=0; i<deleteTag.length; i++){
                    if(event.currentTarget == deleteTag[i]){
                        this.label[i] =  ''
                        articleTagsText[i].innerHTML = ""
                        articleTags[i].style.transition = "0.1s"
                        articleTags[i].style.marginLeft = "0px"
                        articleTags[i].style.padding = "0px 0px"
                        deleteTag[i].style.width = "0px"
                        deleteTag[i].style.marginLeft = "0px"
                        tagCounts++
                        break
                    }
                }
            },
            deleteAllTag() {
                for (let i=0; i<deleteTag.length; i++){
                    this.label[i] =  ''
                    articleTagsText[i].innerHTML = ""
                    articleTags[i].style.transition = "0.1s"
                    articleTags[i].style.marginLeft = "0px"
                    articleTags[i].style.padding = "0px 0px"
                    deleteTag[i].style.width = "0px"
                    deleteTag[i].style.marginLeft = "0px"
                    tagCounts++
                }
                this.article.articleId = ''
                this.article.title = ''
                this.article.labels = ''
                this.article.text = ''
                this.label = []
            },
            publishError(){
                this.$confirm('确认进行发布/更新操作?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    type: 'warning'
                }).then(() => {
                    for(let i=0; i<this.label.length;i++){
                        if (this.label[i]!=''){
                            this.article.labels = this.article.labels + this.label[i]+"、"
                        }
                    }
                    // 去除最后一个字符（、）
                    this.article.labels = this.article.labels.substring(0,this.article.labels.length - 1)

                    if (this.article.title.length==0){
                        this.$message("请填写【ERROR标题】")
                    } else if (this.article.labels.length==0) {
                        this.$message("请填写【标签】")
                    } else if (this.article.text.length==0) {
                        this.$message("请填写【描述】")
                    }else {
                        let configs = {
                            headers:{ 'Content-Type':'application/json'}  // 设置说明上传JSON
                        };
                        this.axios.post(this.baseURL, this.article, configs).then(res=>{
                            if (res.data == true){
                                if (this.article.articleId ==""){
                                    this.successOpt("Error发布成功")
                                } else {
                                    this.successOpt("Error更新成功")
                                    this.$router.push({path:"/worksDisplayPage", query:{workId:this.article.articleId}})
                                }
                                this.deleteAllTag()
                            } else if (res.data == false) {
                                this.failOpt("error发布失败")
                            } else {
                                this.warningOpt("服务器异常，请稍后再试")
                            }
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                        this.article.labels = ''
                    }
                }).catch(() => {
                    console.log('已取消删除')
                });
            },

            successOpt(message) {
                this.$notify({
                    title: '成功',
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: '错误',
                    message: message
                });
            },
            warningOpt(message) {
                this.$notify.warning({
                    title: '提示',
                    message: message
                });
            },
        },
    }
</script>

<style scoped>
  .editPublish-article-title{
    width: 100%;
    height: 45px;
    margin: 5px auto;
    box-shadow: 0 0 10px #cecece;
  }
  .editPublish-article-title input{
    width: 98.45%;
    height: 40px;
    border: #ffffff 1px solid;
    border-radius: 3px;
    background-color: #ffffff;
    font-size: 18px;
    padding-left: 15px;
    box-shadow: 0 0 10px #e2e2e2;
    font-weight: bolder;
    color: #424242;
    letter-spacing: 1px;
  }
  .editPublish-article-title input::placeholder{
    color: #bbbabf;
  }
  .editPublish-article-tags{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    border-radius: 3px;
    background-color: #ffffff;
    box-shadow: 0 0 10px #cecece;
  }
  .article-tags{
    float: left;
    min-width: 0px;
    height: 25px;
    line-height: 25px;

    font-size: 12px;
    border-radius: 3px;
    margin-top: 7px;
    color: #4a4a4a;
    background-color: #e7e7e7;
    transition: 0.3s;
    overflow: hidden;
  }
  .article-tags-text{
    float: left;
    height: 25px;
    line-height: 25px;
  }
  .deleteTag{
    float: left;
    display: block;
    width: 0px;
    height: 13px;
    line-height: 14.5px;
    text-align: center;
    border-radius: 50%;
    margin-top: 6px;
    color: black;
    overflow: hidden;
  }
  .deleteTag:hover{
    background-color: #c4bec2;
  }
  .article-tags-input{
    width: 150px;
    height: 35px;
    float: left;
    margin-left: 15px;
    border: 1px solid transparent;
    font-size: 13px;
  }
  .article-tags-input::placeholder{
    color: #bec9c9;
    font-size: 13px;
  }
  .editPublish-article-dec{
    width: 100%;
    margin: 5px auto;
  }
  .publish-tip{
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    text-align: center;
    letter-spacing: 2px;
    border-radius: 3px;
    color: rgb(191, 191, 191);
    background-color: white;
    margin-top: 10px;
    border: 1px solid  transparent;
    font-weight: bolder;
    box-shadow: 0 0 10px #d2d2d2;
    transition: 0.2s;
  }
  .publish-tip:hover{
    color: rgb(113, 113, 113);
    /*background-color: #6c6c6c;*/
    /*border: 1px solid #888689;*/
    border: 1px dashed #c7c5c8;
  }
  .publish-tip:active{
    border: 1px dashed #000000;
  }
</style>
